<template>
	<view class="wrap">
		<view class="skeleton" v-if="isSkeleton">
			<view class="skeleton" v-for="item in [1,2,3,4]" :key="item">
				<u-skeleton
					    rows="5"
						rowsWidth = "630rpx"
						rowsHeight="40rpx"
						:title="false"
						:loading = "isSkeleton"
				>
				</u-skeleton>
			</view>
		</view>
		<view class="tabBox">
			<view class="tabLeft">
				<view class="tabLi" @click="seled('1')" :class="selInfo == 1?'tab_select':''">
					运单
					<text class="bottomBox"></text>
				</view>
				<view class="tabLi" :class="selInfo == 2?'tab_select':''" @click="seled('2')">
					配载单
					<text class="bottomBox"></text>
				</view>
			</view>
			<view class="tabRight" @click="showSearch()">
				筛选
				
			</view>
		</view>
		<view class="content">
			<!-- 运单 -->
			<u-loading-page :loading="loading"></u-loading-page>
			<view class="stowageBox" id="box" v-if="selInfo == 1 && !isSkeleton" @touchstart="touchStart" @touchend="touchEnd">
		
				<view class="top-tips-box" :style="{'opacity':opacity,}">
					<view class="loading-box">
						<u-loading-icon></u-loading-icon>
						<text>{{pullingText}}</text>
					</view>
				</view>
				<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll"
					v-if="waybillList.length"
					:style="{'transition-duration':`${duration}ms`,transform: `translateY(${move}rpx)`}"
					@touchstart="touchstart($event)" @touchmove="touchmove" @touchend="touchend">
					<view class="stowageList" @click="jumpWaybill(item)" v-for="(item,index) in waybillList" :key="index">
						<view class="stowageHead" v-if="item.billStatus == 1">
							<view class="stowageLeft">
								草稿
							</view>
							<view class="stowageContent">
								运单号：{{item.billNo?item.billNo : '暂无'}} 
							</view>
							<view class="tag"  v-if="item.waybillMode">
								{{item.waybillMode == 1?'指派':item.waybillMode == 2?'抢单':item.waybillMode == 3?'货源':''}}
							</view>
							<view class="">
								<u-icon name="map-fill" :color="item.fenceStatus === '0'?'#e41c0a':'#4ec42a'" size="18"></u-icon>
							</view>
						</view>
						<view class="stowageHead" v-if="item.billStatus == 2">
							<view class="stowageLeft">
								未接单
							</view>
							<view class="stowageContent">
								运单号：{{item.billNo}}
							</view>
							<view class="tag" v-if="item.waybillMode">
								
								{{item.waybillMode == 1?'指派':item.waybillMode == 2?'抢单':item.waybillMode == 3?'货源广场':''}}
							</view>
							<view class="">
								<u-icon name="map-fill" :color="item.fenceStatus === '0'?'#e41c0a':'#4ec42a'" size="18"></u-icon>
							</view>
						</view>
						<view class="stowageHead" v-if="item.billStatus == 3"
							style="background: linear-gradient(90deg, #EFFBF7 0%, rgba(255,255,255,0.95) 100%);">
							<view class="stowageLeft" style="background: #16C295;">
								已接单
							</view>
							<view class="stowageContent">
								运单号：{{item.billNo}}
							</view>
							<view class="tag"  v-if="item.waybillMode">
								{{item.waybillMode == 1?'指派':item.waybillMode == 2?'抢单':item.waybillMode == 3?'货源':''}}
							</view>
							<view class="">
								<u-icon name="map-fill" :color="item.fenceStatus === '0'?'#e41c0a':'#4ec42a'" size="18"></u-icon>
							</view>
						</view>
						<view class="stowageHead" v-if="item.billStatus == 4"
							style="background: linear-gradient(90deg, #EFFBF7 0%, rgba(255,255,255,0.95) 100%);">
							<view class="stowageLeft" style="background: #16C295;">
								进行中
							</view>
							<view class="stowageContent">
								运单号：{{item.billNo}}
							</view>
							<view class="tag">
								{{item.waybillMode == 1?'指派':item.waybillMode == 2?'抢单':item.waybillMode == 3?'货源':''}}
							</view>
							<view class="">
								<u-icon name="map-fill" :color="item.fenceStatus === '0'?'#e41c0a':'#4ec42a'" size="18"></u-icon>
							</view>
						</view>
						<view class="stowageHead" v-if="item.billStatus == 5 || item.billStatus == 6"
							style="background: linear-gradient(90deg, #EBF5FF 0%, rgba(255,255,255,0.95) 100%);">
							<view class="stowageLeft" style="background: #00468C;">
								{{item.billStatus == 6?'已结束':'已完成'}}
							</view>
							<view class="stowageContent">
								运单号：{{item.billNo}}
							</view>
							<view class="tag">
								{{item.waybillMode == 1?'指派':item.waybillMode == 2?'抢单':item.waybillMode == 3?'货源':''}}
							</view>
							<view class="">
								<u-icon name="map-fill" :color="item.fenceStatus === '0'?'#e41c0a':'#4ec42a'" size="18"></u-icon>
							</view>
						</view>
						<view class="stowageHead" v-if="item.billStatus == 7"
							style="background: linear-gradient(90deg, #FFF1EE 0%, rgba(255,255,255,0.95) 100%);">
							<view class="stowageLeft" style="background: #8D090C;">
								申请作废中
							</view>
							<view class="stowageContent">
								运单号：{{item.billNo}}
							</view>
							<view class="tag"  v-if="item.waybillMode">
								{{item.waybillMode == 1?'指派':item.waybillMode == 2?'抢单':item.waybillMode == 3?'货源':''}}
							</view>
							<view class="">
								<u-icon name="map-fill" :color="item.fenceStatus === '0'?'#e41c0a':'#4ec42a'" size="18"></u-icon>
							</view>
						</view>
						<view class="stowageHead" v-if="item.billStatus == 8"
							style="background: linear-gradient(90deg, #FFF1EE 0%, rgba(255,255,255,0.95) 100%);">
							<view class="stowageLeft" style="background: #8D090C;">
								已作废
							</view>
							<view class="stowageContent">
								运单号：{{item.billNo}}
							</view>
							<view class="tag" v-if="item.waybillMode">
								{{item.waybillMode == 1?'指派':item.waybillMode == 2?'抢单':item.waybillMode == 3?'货源':''}}
							</view>
							<view class="">
								<u-icon name="map-fill" :color="item.fenceStatus === '0'?'#e41c0a':'#4ec42a'" size="18"></u-icon>
							</view>
						</view>
						<view class="address">
							<view class="addressStar">
								<view class="icon start">始</view>
								{{ item.startCity.substring(0,22) }}
								{{item.startCity.substring(22)?'…':''}}
							</view>
							<view class="addressEnd">
								<view class="icon end">收</view>
								{{ item.endCity.substring(0,22)}}
								{{ item.endCity.substring(22)?'…':''}}
							</view>
						</view>
						<view class="stowageInfo">
							<view class="name">{{item.carrierName}}</view>
							<view class="goodsInfo">
								<view class="goodsName">货物名称： <text>{{item.goodsName}}</text> </view>
								<view>单价： <text>{{item.shippingPrice}}元/{{item.unit}}</text></view>
							</view>
							<view class="progress">
								<view class="progressBar">
									<u-line-progress :blue="true" height="12" inactiveColor="#FFFFFF"
										border="1px solid #4D83B9" :percentage="item.shippedNum/item.planShippingNum*100"
										:showText="false"></u-line-progress>
								</view>
								总量{{item.planShippingNum}}吨，剩余{{(item.planShippingNum - item.shippedNum).toFixed(2)}}吨
							</view>
						</view>
					</view>
					<view class="tip">
						<u-loadmore :line="true" :status="status" :loading-text="loadingText" :nomore-text="nomoreText"
							color="#9E9E9E" />
					</view>
				</scroll-view>
				<!-- <u-loadmore v-if="waybillList" :status="status" loadmoreText="点击加载更多" @loadmore="loadmore"/> -->
				<view class="empty" v-if="!waybillList.length">
					<u-empty v-if="menuFlag" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
					<u-empty v-else mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
				</view>
			</view>
			<!-- 配载单 -->
			<view class="stowageBox1" v-if="selInfo == 2"  @touchstart="touchStart" @touchend="touchEnd">
				<view class="top-tips-box" :style="{'opacity':opacity,}">
					<view class="loading-box">
						<u-loading-icon></u-loading-icon>
						<text>{{pullingText}}</text>
					</view>
				</view>
				<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll"
					v-if="stowageData.length"
					:style="{'transition-duration':`${duration}ms`,transform: `translateY(${move}rpx)`}"
					@touchstart="touchstart($event)" @touchmove="touchmove" @touchend="touchend">
					<loading-orders @setstowageForm = "setstowageForm" v-if="stowageData.length" :ListData="stowageData"></loading-orders>
					<view class="tip">
						<u-loadmore :line="true" :status="status" :loading-text="loadingText" :nomore-text="nomoreText"
							color="#9E9E9E" />
					</view>
				</scroll-view>
				<!-- <u-loadmore v-if="stowageData" :status="status1" loadmoreText="点击加载更多" @loadmore="loadmore1"/> -->
				<view class="empty" v-if="stowageData.length == 0">
					<u-empty v-if="menuFlag1" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
					<u-empty v-else mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
				</view>
			</view>
			<u-popup :show="searchShow" mode="top" :round="10" @close="close" @open="open">
				<view class="search" style="box-sizing: border-box;">
					<view class="sel">
						<view class="searchLi">
							<view class="selTop">
								运单状态
							</view>
							<view class="tipsBox">
								<view :class="item.seled?'seled':''" class="selTips" v-for="(item, index) in tips"
									:key="index" @click="selTip(item,index)">
									{{ item.dicName }}
								</view>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								项目
							</view>
							<view class="project">
								<view class="selpro" @click="projectShow = true">
									{{ formData.project?formData.project:'选择项目' }}
									<view class="icon">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</view>
								<u-picker :show="projectShow" @cancel="projectShow= false" :columns="projectList"
									keyName="project_name" @confirm="proSelect"></u-picker>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								运单号
							</view>
							<view class="project">
								<!-- <u-search shape="square" bgColor="#fafafa" placeholder="输入运单号"
									v-model="searchForm.billNo" :showAction="false"></u-search> -->
									<u-textarea v-model="searchForm.billNo" count maxlength="100"  style="background:#fafafa" placeholder="输入运单号 ,支持批量搜索，多个单号用逗号或换行分割" :formatter="changeCustNo" placeholderClass="textareaCss" ></u-textarea>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								客户单号
							</view>
							<view class="project">
								<!-- <u-search shape="square" bgColor="#fafafa" placeholder="输入客户单号" @change="changeCustNo" :key="commponent1Key"
									v-model="searchForm.custNo" :showAction="false"></u-search> -->
								<u-textarea v-model="searchForm.custNo" count maxlength="100" style="background:#fafafa" placeholder="输入客户单号 ,支持批量搜索，多个单号用逗号或换行分割" :formatter="changeCustNo" placeholderClass="textareaCss" ></u-textarea>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								承运商
							</view>
							<view class="project">
								<u-search shape="square" bgColor="#fafafa" placeholder="输入承运商"
									v-model="searchForm.carrierName" :showAction="false"></u-search>
							</view>
							<!-- <view class="project">
								<view class="selpro" @click="carrierShow = true">
									{{ formData.carrier?formData.carrier:'选择承运商' }}
									<view class="icon">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</view>
								<u-picker @confirm="selCarr" @cancel="carrierShow= false" :show="carrierShow"
									:columns="carrierList" keyName="platformCoName" @change="proSelect"></u-picker>
							</view> -->
						</view>
						<view class="searchLi">
							<view class="selTop">
								路线
							</view>
							<view class="project">
								<view class="selpro" @click="showRegion1 = true">
									{{formData.shippingAddr?formData.shippingAddr:'选择起运地'}}
									<view class="icon">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</view>
								<u-picker :show="showRegion1" ref="uPicker2" :columns="columns1" :defaultIndex="defaultIndex1" keyName="label"
									@confirm="confirm1" @change="changeHandler1" closeOnClickOverlay @close="showRegion1 = false"
									@cancel="showRegion1 = false"></u-picker>
								</view>
							<view class="project" style="margin-top: 14rpx;">
								<view class="selpro" @click="showRegion2 = true">
									{{formData.receiveAddr?formData.receiveAddr:'选择目的地'}}
									<view class="icon">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</view>
								<u-picker :show="showRegion2" ref="uPicker2" :columns="columns2" :defaultIndex="defaultIndex2" keyName="label"
									@confirm="confirm2" @change="changeHandler2" closeOnClickOverlay @close="showRegion2 = false"
									@cancel="showRegion2 = false"></u-picker>
								</view>
						</view>
		
					</view>
					<view class="btnBox">
						<view class="save btn" @click="resetSearch(1)">重置</view>
						<view class="up btn" @click="searchList(1)" @keydown.enter="searchList(1)">筛选</view>
					</view>
				</view>
			</u-popup>
			<!-- 配载单弹框 -->
			<u-popup :show="stowageSearchShow" :round="10" mode="top" @close="stowageSearchShow = false" @open="open">
				<view class="search"  style="box-sizing: border-box;">
					<view class="sel">
						<view class="searchLi">
							<view class="selTop">
								配载单状态
							</view>
							<view class="tipsBox">
								<view :class="item.seled?'seled':''" class="selTips" v-for="(item, index) in tips1"
									:key="index" @click="selTip1(item,index)">
									{{ item.dicName }}
								</view>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								物流状态
							</view>
							<view class="tipsBox">
								<view :class="item.seled?'seled':''" class="selTips" v-for="(item, index) in tips2"
									:key="index" @click="selTip2(item,index)">
									{{ item.dicName }}
								</view>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								项目
							</view>
							<view class="project">
								<view class="selpro" @click="projectShow = true">
									{{ stowageformVal.project?stowageformVal.project:'选择项目' }}
									<view class="icon">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</view>
								<u-picker :show="projectShow" @cancel="projectShow= false" :columns="projectList"
									keyName="project_name" @confirm="proSelect1"></u-picker>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								配载单号
							</view>
							<view class="project">
								<!-- <u-search shape="square" bgColor="#fafafa" placeholder="输入配载单号关键字"
									v-model="stowageForm.billNo" :showAction="false"></u-search> -->
								<u-textarea v-model="stowageForm.billNo" count maxlength="100" style="background:#fafafa" placeholder="输入配载单号 ,支持批量搜索，多个单号用逗号或换行分割" :formatter="changeCustNo" placeholderClass="textareaCss" ></u-textarea>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								客户单号
							</view>
							<view class="project">
								<!-- <u-search shape="square" bgColor="#fafafa" placeholder="输入客户单号"
									v-model="stowageForm.custNo" :showAction="false" @change="changeCustNo1"></u-search> -->
								<u-textarea v-model="stowageForm.custNo" count maxlength="100" style="background:#fafafa" placeholder="输入客户单号 ,支持批量搜索，多个单号用逗号或换行分割" :formatter="changeCustNo" placeholderClass="textareaCss" ></u-textarea>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								车牌号
							</view>
							<view class="project">
								<u-search shape="square" bgColor="#fafafa" placeholder="输入车牌号关键字"
									v-model="stowageForm.vehicleNo" :showAction="false"></u-search>
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								司机
							</view>
							<view class="project">
								<u-search shape="square" bgColor="#fafafa" placeholder="输入司机姓名关键字"
									v-model="stowageForm.driverName" :showAction="false" ></u-search>
									 <!-- @search="searchList(2)" -->
							</view>
						</view>
						<view class="searchLi">
							<view class="selTop">
								路线
							</view>
							<view class="project">
								<view class="selpro" @click="showRegion1 = true">
									{{stowageformVal.shippingAddr?stowageformVal.shippingAddr:'选择起运地'}}
									<view class="icon">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</view>
								<u-picker :show="showRegion1" ref="uPicker2" :columns="columns1" :defaultIndex="defaultIndex1" keyName="label"
									@confirm="confirm1" @change="changeHandler2" closeOnClickOverlay @close="showRegion1 = false"
									@cancel="showRegion1 = false"></u-picker>
								</view>
							<view class="project" style="margin-top: 14rpx;">
								<view class="selpro" @click="showRegion2 = true">
									{{stowageformVal.receiveAddr?stowageformVal.receiveAddr:'选择目的地'}}
									<view class="icon">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</view>
								<u-picker :show="showRegion2" ref="uPicker2" :columns="columns2" :defaultIndex="defaultIndex2" keyName="label"
									@confirm="confirm2" @change="changeHandler2" closeOnClickOverlay @close="showRegion2 = false"
									@cancel="showRegion2 = false"></u-picker>
							</view>
						</view>
					</view>
					<view class="btnBox">
						<view class="save btn" @click="resetSearch(2)">重置</view>
						<view class="up btn" @click="searchList(2)">筛选</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import Plate from '@/components/plate/plate.vue'
	import loadingOrders from '@/components/loadingOrders/loadingOrders.vue'
	import {
		waybillList,
		getAllReject,
		selectRegion,
		queryDicKeyValueList,
		querySelector,
		getLoadingOrders,getRegion 
	} from '@/config/api/app.js'
	import Cache from '@/utils/cache'
	export default {
		components: {
			Plate,
			loadingOrders
		},
		data() {
			return {
				isSkeleton: true,
				menu: Cache.get('MENU'), //权限
				menuFlag: false,
				menuFlag1: false,
				selInfo: 1,
				searchShow: false,
				tips: [], //运单状态
				projectShow: false, //配载单弹框显示
				projectList: [], //配载单弹框数据-运单数据
				formData: { //运单搜索框
					carrier: '',
					project: '',
					shippingAddr: '',
					receiveAddr: ''
				},
				project: '',
				proNum: '', //配载单单号
				carrierShow: false, //承运商弹框
				carrierList: [],
				waybillList: [], //运单列表
				status: 'loadmore', //加载样式
				loadingText: '努力加载中',
				nomoreText: '没有更多了！',
				limit: 10,
				page: 1,
				departureShow: false, //起运地址
				arriveShow: false, //到达地址
				
				searchForm: { //运单搜索框
					"page": 1,
					"limit": 10,
					"billNo": "", //运单编号
					"carrierName": "", //承运商名称
					"shippingAddr": "", //起运地
					"receiveAddr": "", //目的地
					"billStatus": "", //运单状态：1-草稿 2-未接单 3-已接单 4-进行中 5-已完成 6-已结束 7申请作废中
					"itemId": "", //项目id
					"platformCoId": "" ,//网络承运商id，
					"carrierName": "",
					"custNo":"",//客户单号
				},
				stowageData: [], //配载单列表
				stowageformVal: {
					"project": "", //选择项目
					"shippingKey": "", //起运地
					"receiveAddr": "", //目的地
				},
				stowageForm: {
					limit: 10,
					page: 1,
					billNo: '',
					driverKey: '', //司机名称
					vehicleNo: '',
					billStatus: [],
					shippingStatus: [],
					shippingKey: '',
					custNo: '',//客户单号
				}, //配载单查询
				page1: 1,
				status1: 'loadmore', //配载单加载样式
				tips1: [{
						dicName: '全部',
						seled: false,
						dicValue: ''
					},
					{
						dicName: '未接单',
						seled: false,
						dicValue: 1
					},
					{
						dicName: '已接单',
						seled: false,
						dicValue: 2
					},
					{
						dicName: '已完成',
						seled: false,
						dicValue: 3
					},
					{
						dicName: '已作废',
						seled: false,
						dicValue: 4
					},
					{
						dicName: '取消申请中',
						seled: false,
						dicValue: 5
					},
					{
						dicName: '已取消',
						seled: false,
						dicValue: 6
					},
				],
				tips2: [{
						dicName: '全部',
						seled: false,
						dicValue: ''
					},
					{
						dicName: '未起运',
						seled: false,
						dicValue: 1
					},
					{
						dicName: '运输中',
						seled: false,
						dicValue: 2
					},
					{
						dicName: '已送达',
						seled: false,
						dicValue: 3
					},
					{
						dicName: '已回单',
						seled: false,
						dicValue: 4
					},
					{
						dicName: '回单已确认',
						seled: false,
						dicValue: 5
					},
				],
				stowageSearchShow: false,
				//ceshi
				refreshFlag: true,
				gap: 100,
				touchFlag: false,
				startY: null,
				move: 0,
				opacity: 0,
				duration: 0,
				pullingText: '下拉刷新',
				loading: false,
				
				showRegion1: false,
				defaultIndex1: [0, 0, 0],
				columns1: [], //省份数据显示，三级联动需要三维数组，展示初始数据
				columnData1: [], //市数据
				columnDatas1: [], //区地址
				
				showRegion2: false,
				defaultIndex2: [0, 0, 0],
				columns2: [], //省份数据显示，三级联动需要三维数组，展示初始数据
				columnData2: [], //市数据
				columnDatas2: [], //区地址
				
				startTime: 0,
				startPosition: 0,
				endPosition: 0,
				commponent1Key: 0
			}
		},
		mounted() {
			if (this.menu.waybillList == 1) {
				// console.log(this.searchForm,'首次获取')
				Cache.get('searchForm')?this.searchForm = Cache.get('searchForm'):''
				Cache.get('formData')?this.formData = Cache.get('formData'):''
				this.getBillsWay(this.searchForm)
				Cache.remove('searchForm')
				Cache.remove('formData')
				this.menuFlag = true
			} else {
				this.waybillList = []
				this.menuFlag = false
			}
			if(Cache.get('selInfo')){
				this.selInfo = Cache.get('selInfo')
				if(Cache.get('stowageForm')){
					this.stowageForm = Cache.get('stowageForm')
					this.stowageForm.billStatus[0]?this.tips1[this.stowageForm.billStatus[0]].seled = true:''
				}
				if(Cache.get('stowageformVal')){
					this.stowageformVal = Cache.get('stowageformVal')
					this.stowageForm.shippingStatus[0]?this.tips2[this.stowageForm.shippingStatus[0]].seled = true:''
				}
				
				this.seled(this.selInfo)
				Cache.remove('selInfo')
				Cache.remove('stowageForm')
				Cache.remove('stowageformVal')
			}
		},

		methods: {
			changeCustNo(value){
				return value.replace(/[^\a-\z\A-\Z0-9\s\.\,\?\<\>\。\，\-\/\——\=\;\@\！\!\+\$\#\%\^\&\*\)\(\_]/g,'')	
			},
			// 起点
			touchStart(event) {
			  this.startTime = Date.now()
			  this.startPosition = event.changedTouches[0].clientX
			},
			// 终点,计算移动距离
			touchEnd(event) {
				return false;
				const endTime = Date.now()
				if (endTime - this.startTime > 2000) {
					return;
				}
				this.endPosition = event.changedTouches[0].clientX
			 
			     
			    //当移动距离超过10时判断左滑右滑。
				if (Math.abs(this.endPosition - this.startPosition) > 50) {
				  this.endPosition = event.changedTouches[0].clientX
				  var elePosition = this.endPosition - this.startPosition > 0 ? "right" : "left"
			 
				} else {
					return;
				}
							
					
				if(this.selInfo == 1 && elePosition == 'left'){
					this.selInfo =2
					if (this.menu.loadList == 1) {
						this.searchShow = false
						this.getStowageData(this.stowageForm)
						this.menuFlag1 = true
						this.isSkeleton = false
					} else {
						this.stowageData = []
						this.menuFlag1 = false
					}
				}else if(this.selInfo == 2 && elePosition == 'right'){
					this.selInfo =1
					if(this.menu.waybillList == 1){
						this.getBillsWay(this.searchForm)
						this.stowageSearchShow =false
						this.menuFlag = true
					}else{
						this.waybillList = []
						this.menuFlag = false
					}
					
				}
			},
			//运单列表
			getBillsWay() {
				waybillList(this.searchForm, {
				 	custom: {
						title: '查询中……'
				 	}
				 }
				).then(res => {
					console.log(res,44444444)
					if (res.code == 0) {
						this.reset()
						this.loading = false
						this.status = 'loading'
						let NewArr = res.data.list
						NewArr.forEach(item => {
							let adress = (item.receiptCity === null?'':item.receiptCity) + (item.receiptAddress === null?'':item.receiptAddress)
							// console.log(adress)
							item.endCity   = adress
							let startadress = (item.shippingCity === null?'':item.shippingCity) + (item.shippingAddress === null?'':item.shippingAddress)
							item.startCity   = startadress
						})
						this.searchForm.page == 1 ? this.waybillList = res.data.list : this.waybillList = [...this
							.waybillList, ...res.data.list
						]
						
						this.page = res.data.pages
						
						if (this.page == this.searchForm.page) this.status = 'nomore'
						if(this.isSkeleton) this.isSkeleton = false
					}
				})
			},
			//配载单表格
			getStowageData(data) {
				getLoadingOrders(data,{
					custom: {
						title: '查询中……'
					}
				}
				).then(res => {
					if (res.code == 0) {
						this.reset()
						this.loading = false
						this.status = 'loading'
						this.stowageForm.page == 1 ? this.stowageData = res.data.list : this.stowageData = [...this.stowageData, ...res.data.list]
						this.page = res.data.pages
						if (this.page == this.stowageForm.page) this.status = 'nomore'

					}
				})
			},
			// 选择运单和配载单
			seled(val) {
				this.selInfo = val
				if (val == 2) {
					if (this.menu.loadList == 1) {
						this.searchShow = false
						this.getStowageData(this.stowageForm)
						this.menuFlag1 = true
						this.isSkeleton = false
					} else {
						this.stowageData = []
						this.menuFlag1 = false
					}
				}else{
				// console.log('1')
					this.getBillsWay(this.searchForm)
					this.stowageSearchShow =false
				}
			},
			//运单详情
			jumpWaybill(item) {
				if(item.billStatus == 1){
					uni.navigateTo({
						url: '/pages/waybill/creat?id=' + item.waybillId
					});
				}else{
					Cache.set("itemId", item.itemId, 59 * 24 * 60 * 60);
					
					Cache.set("formData", this.formData);
					Cache.set("searchForm", this.searchForm);
					uni.navigateTo({
						url: '/pages/waybill/waybill?id=' + item.waybillId+'&billStatus='+ item.billStatus + '&carrierName=' +item.carrierName
					});
				}
				
			},

			open() {},
			close() {
				this.searchShow = false
			},
			//显示搜索框
			showSearch() {
				if (this.selInfo == 1) {
					if (this.menu.waybillList == 0) {
						uni.$u.toast('暂无权限');
						return false
					}
					
					// this.formData = {
					// 	carrier: '',
					// 	project: '',
					// 	shippingAddr: '',
					// 	receiveAddr: ''
					// }
					// this.searchForm = {
					// 	"page": 1,
					// 	"limit": 10,
					// 	"billNo": "",
					// 	"carrierName": "",
					// 	"shippingAddr": "",
					// 	"receiveAddr": "",
					// 	"billStatus": "",
					// 	"itemId": "",
					// 	"platformCoId": ""
					// }
					this.getProSelect()
					this.searchShow = true
					this.initDataPicker()
				} else {
					if (this.menu.loadList == 0) {
						uni.$u.toast('暂无权限');
						return false
					}
					
					// this.remove()
					this.stowageSearchShow = true
					getAllReject().then(res => {
						console.log(res,1111111111)
						this.projectList = []
						if (res.code == 0) {
							let data = res.data.project
							this.projectList.push(data)
						}
					})
					this.initDataPicker()
				}
			},
			resetSearch(code){
				if(code == 1){
					this.getProSelect()
					this.formData = {
						carrier: '',
						project: '',
						shippingAddr: '',
						receiveAddr: ''
					}
					this.searchForm = {
						"page": 1,
						"limit": 10,
						"billNo": "",
						"carrierName": "",
						"shippingAddr": "",
						"receiveAddr": "",
						"billStatus": "",
						"itemId": "",
						"platformCoId": "",
						"custNo":""//客户id
					}
					
				}else{
					this.remove()
				}
			},
			searchList(code){
				if(code == 1){
					this.searchBills()
				}else{
					this.searchBills1()
				}
			},
			//充值配载单选择状态
			remove() {
				this.tips1 = [{
						dicName: '全部',
						seled: false,
						dicValue: ''
					},
					{
						dicName: '未接单',
						seled: false,
						dicValue: 1
					},
					{
						dicName: '已接单',
						seled: false,
						dicValue: 2
					},
					{
						dicName: '已完成',
						seled: false,
						dicValue: 3
					},
					{
						dicName: '已作废',
						seled: false,
						dicValue: 4
					},
				]
				this.tips2 = [{
						dicName: '全部',
						seled: false,
						dicValue: ''
					},
					{
						dicName: '未起运',
						seled: false,
						dicValue: 1
					},
					{
						dicName: '运输中',
						seled: false,
						dicValue: 2
					},
					{
						dicName: '已送达',
						seled: false,
						dicValue: 3
					},
					{
						dicName: '已回单',
						seled: false,
						dicValue: 4
					},
					{
						dicName: '回单已确认',
						seled: false,
						dicValue: 5
					},
				]
				this.stowageForm = {
					limit: 10,
					page: 1,
					billNo: '',
					driverKey: '', //司机名称
					vehicleNo: '',
					billStatus: [],
					shippingStatus: [],
					custNo:''
				}
				this.stowageformVal = {
					"project": "", //选择项目
					"shippingKey": "", //起运地
					"receiptKey": "", //目的地
				}
			},
			//选择运单状态
			selTip(data, index) {
				this.tips.forEach((item, i) => {
					if (i != index) {
						item.seled = false
					} else  if(index == i){
						if(this.searchForm.billStatus == index){
							this.searchForm.billStatus =''
						}else{
							this.searchForm.billStatus = this.tips[index].dicValue
						}
						
						this.tips[index].seled = !this.tips[index].seled
					}
				})
			},
			//选择配载单状态 数组等下来去重
			selTip1(data, index) {
				this.tips1.forEach((item, i) => {
					if (i != index) {
						item.seled = false
					} else {
						if(this.stowageForm.billStatus == index){
							this.stowageForm.billStatus =[]
						}else{
							this.stowageForm.billStatus = [this.tips1[index].dicValue]
						}
						
						this.tips1[index].seled = !this.tips1[index].seled
					}
				})
			},
			//选择配载单物流状态shippingStatus--物流状态
			selTip2(data, index) {
				this.tips2.forEach((item, i) => {
					if (i != index) {
						item.seled = false
					} else {
						if(this.stowageForm.shippingStatus == index){
							this.stowageForm.shippingStatus =[]
						}else{
							this.stowageForm.shippingStatus = [this.tips2[index].dicValue]
						}
						
						this.tips2[index].seled = !this.tips2[index].seled
					}
				})
			},
			//获取搜索框内容
			getProSelect() {
				//运单状态
				console.log(this.formData)
				let _this = this
				queryDicKeyValueList(["WAYBILL_STATUS"]).then(res => {
					if (res.code == 0) {
						_this.tips = [{
							dicName: '全部',
							seled: false,
							dicValue: ''
						}]
						let data = res.data.WAYBILL_STATUS
						for (let key in data) {
							let li={}
							if(this.searchForm.billStatus == data[key].dicValue && this.searchForm.billStatus>0){
								li = {
									dicName: data[key].dicName,
									seled: true,
									dicValue: data[key].dicValue
								}
							}else{
								li = {
									dicName: data[key].dicName,
									seled: false,
									dicValue: data[key].dicValue
								}
							}
							
							_this.tips.push(li)
						}
						console.log(this.tips)
					}
				})
				//项目
				getAllReject().then(res => {
					_this.projectList = []
					if (res.code == 0) {
						let data = res.data.project
						_this.projectList.push(data)
					}
				})
				//承运商
				querySelector().then(res => {
					_this.carrierList = []
					if (res.code == 0) {
						let data = res.data
						_this.carrierList.push(data)
					}
				})
			},
			//运单选择项目
			proSelect(e) {
				this.formData.project = e.value[0].project_name
				this.searchForm.itemId = e.value[0].project_id
				this.projectShow = false
			},
			//配载单选择项目
			proSelect1(e) {
				this.stowageformVal.project = e.value[0].project_name
				this.stowageForm.itemId = e.value[0].project_id
				this.projectShow = false
			},
			//选择承运商
			selCarr(e) {
				this.formData.carrier = e.value[0].platformCoName
				this.searchForm.platformCoId = e.value[0].platformCoId
				this.carrierShow = false
			},
			//存储
			setstowageForm() {
				console.log(111)
				Cache.set("stowageForm", this.stowageForm);
				Cache.set("stowageformVal", this.stowageformVal);
				
			},
			//筛选运单
			searchBills() {
				this.waybillList = []
				this.searchForm.page = 1
				this.getBillsWay(this.searchForm)
				this.searchShow = false
			},
			//筛选配载单
			searchBills1() {
				this.stowageData = []
				this.stowageForm.page = 1
				// console.log(this.stowageForm)
				this.getStowageData(this.stowageForm)
				this.stowageSearchShow = false
			},

			//ceshi

			reset() {
				this.touchFlag = false;
				this.startY = null;
				this.move = 0;
				this.opacity = 0;
				this.pullingText = '下拉刷新'
			},
			scroll(e) {
				e.target.scrollTop <= 0 ? this.refreshFlag = true : this.refreshFlag = false
			},
			scrolltolower() {
				if (this.selInfo == 1) {
					this.searchForm.page += 1
					if (this.searchForm.page > this.page) {
						this.status = 'nomore'
						return
					}
					uni.$u.throttle(this.getBillsWay(this.searchForm), 3000)
				} else {
					this.stowageForm.page += 1
					// console.log(this.stowageForm.page, this.page)
					if (this.stowageForm.page > this.page) {
						this.status = 'nomore'
						return
					}
					uni.$u.throttle(this.getStowageData(this.stowageForm), 3000)
				}
			},
			touchend() {
				this.duration = 300;
				if (this.pullingText === '下拉刷新') {
					this.reset();
				} else if (this.pullingText === '释放刷新') {
					// console.log(this.move, 111111)
					this.touchFlag = false;
					if (this.move > 0) {
						// this.move = 100;
						this.pullingText = '努力加载中...';
						setTimeout(() => {
							if (this.selInfo == 1) {
								this.searchForm.page = 1
								this.getBillsWay(this.searchForm)
							} else {
								this.stowageForm.page = 1
								this.getStowageData(this.stowageForm)
							}
						}, 600)
					}
				}
			},
			touchstart(e) {
				if (!this.refreshFlag) return
				if (this.pullingText === '下拉刷新') {
					this.duration = 0;
					this.touchFlag = true;
					this.startY = e.touches[0].clientY;
				}
			},
			touchmove(e) {
				let endY = e.touches[0].clientY
				let top = endY - this.startY
				if (this.touchFlag && top > 0) {
					if (top < this.gap) {
						this.pullingText = '下拉刷新';
						if (top <= 0) top = 0
					} else if (top > this.gap + 10) {
						top = this.gap
						this.pullingText = '释放刷新'
					}
					this.move = top;
					let opacity = (top * 0.015).toFixed(2) > 1 ? 1 : (top * 0.015).toFixed(2);
					this.opacity = opacity;
				}
			},
			confirm1(e) {
				this.showRegion1 = false
				this.valueRegion1 = e.value[0].label +  e.value[1].label  + e.value[2].label
				if(this.selInfo == 2){
					this.stowageformVal.shippingAddr = this.valueRegion1
					this.stowageformVal.shippingAddr = this.valueRegion1
				}else{
					this.formData.shippingAddr =this.valueRegion1
					this.searchForm.shippingAddr =this.valueRegion1
				}
				this.defaultIndex1 = e.indexs
				
			},
			confirm2(e) {
				this.showRegion2 = false
				this.valueRegion2 = e.value[0].label +  e.value[1].label  + e.value[2].label
				if(this.selInfo == 2){
					this.stowageformVal.receiveAddr = this.valueRegion2
					this.stowageForm.receiveAddr = this.valueRegion2
				}else{
					this.formData.receiveAddr = this.valueRegion2
					this.searchForm.receiveAddr = this.valueRegion2
				}
				// console.log(this.valueRegion2)
				this.defaultIndex2 = e.indexs
				
			},
			initDataPicker() {
				getRegion().then(res => {
					if (res.code != 0) {
						uni.$u.toast(res.msg)
						return
					}
					let address = res.data
					this.columns1 = [];
					this.columns2 = [];
					let province = []; //初始数据需要展示的省份
					let province1 = []; //因为第一个市北京市，所以就直接添加北京市下辖的直辖市了 也即初始数据需要展示的市，北京市只有一个市辖区
					let province2 = []; //初始数据需要展示的区域数据，也即是 北京市市辖区内的区
					address.map(item => {
						province.push(item);
					});
					address[0].children.map(item => {
						province1.push(item);
					});
					address[0].children[0].children.map(item => {
						province2.push(item);
					});
					//省数据 因为要做数据初始化，所以是三维数组
					// 数据格式 [ [所有的省份数据:{},{}] , [第一个省份下的所有的市:{},{},{}] , [第一个市下面所有的区:{},{},{}] ]
					this.columns1.push(province);
					this.columns1.push(province1);
					this.columns1.push(province2);
			
					this.columns2.push(province);
					this.columns2.push(province1);
					this.columns2.push(province2);
					// 市数据数组，筛选address文件，将全国所有省下面的市数据放入数组
					// 格式[ [第一个省下面所有市,{},{},{}] , [第二个省下面所有市{},{},{}] , [第三个省下面所有市{},{},{}] ] 注意，以上的第一第二对应着 columns[0] 的数据
					address.map(item => {
						let city = [];
						item.children.map(item1 => {
							city.push(item1);
						});
						this.columnData1.push(city);
						this.columnData2.push(city);
					});
					//区数据数组
					//数据格式: [ 所有省下面所有市的所有区 [ 第一个省下面所有市的区:[ [第一个省下面第一个市的所有区] , [第一个省下面第二个市的所有区] ,]   ,   [ 第二个省下面所有市的区:[ [第二个省下面第一个市的所有区] , [第二个省下面第二个市的所有区] ,]   ]
					let area = [];
					address.map((item, index) => {
						let area1 = []; //省下面所有市的初始化
						item.children.map(item1 => {
							area = []; //市下面的区初始化
							item1.children.map(item2 => {
								area.push(item2);
							});
							area1.push(area); // 每循环一个市，添加该市下面的所有区
						});
						this.columnDatas1.push(area1); // 每循环一个省，添加该省下面的所有市
						this.columnDatas2.push(area1); // 每循环一个省，添加该省下面的所有市
					});
				}).catch(err => {
					console.log(err)
				})
			},
			changeHandler1(e) { //城市选择时触发
				const {
					columnIndex, //当前选择的列，省 / 市 / 区
					value, // 当前选择的数组内容
					values, // values为当前变化列的数组内容
					index, // 当前列的下标值
					indexs, // 当前选择 省 市 区的下表值
					picker = this.$refs.uPicker1
				} = e;
				// 当第一列值发生变化时，变化第二列和第三列的值（省份变更，市和区跟着变更）
				if (columnIndex === 0) { // 判断当前变更的是省还是市还是区
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData1[
						index]); //设置市为该省下面的所有市，index是当前省在省份数组的下标，对应市数组中的下表就是 该省下面的所有市 的数据
					picker.setColumnValues(2, this.columnDatas1[index][0]); // 设置区域为该省下面第一个市下面的所有区域
				}
				if (columnIndex === 1) {
					// 当第二列发生变化 变化对应的第三列 
					picker.setColumnValues(2, this.columnDatas1[indexs[0]][index]); //同上
				}
			},
			changeHandler2(e) { //城市选择时触发
				const {
					columnIndex, //当前选择的列，省 / 市 / 区
					value, // 当前选择的数组内容
					values, // values为当前变化列的数组内容
					index, // 当前列的下标值
					indexs, // 当前选择 省 市 区的下表值
					picker = this.$refs.uPicker2
				} = e;
				// 当第一列值发生变化时，变化第二列和第三列的值（省份变更，市和区跟着变更）
				if (columnIndex === 0) { // 判断当前变更的是省还是市还是区
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData2[
						index]); //设置市为该省下面的所有市，index是当前省在省份数组的下标，对应市数组中的下表就是 该省下面的所有市 的数据
					picker.setColumnValues(2, this.columnDatas2[index][0]); // 设置区域为该省下面第一个市下面的所有区域
				}
				if (columnIndex === 1) {
					// 当第二列发生变化 变化对应的第三列 
					picker.setColumnValues(2, this.columnDatas2[indexs[0]][index]); //同上
				}
			},
		}
	}
</script>

<style lang="less">
	* {
		box-sizing: border-box;
	}
	.wrap{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-top: 160rpx;
	}
	.tabBox {
		text-align: left;
		padding: 100rpx 24rpx 0 32rpx;
		background-color: #FFFFFF;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 10087;
		box-sizing: border-box;
	
		.tabLeft {
			float: left;
	
			.tabLi {
				height: 80rpx;
				float: left;
				font-size: 31rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				margin-right: 29rpx;
				padding-bottom: 10rpx;
			}
	
			.tab_select {
				font-size: 43rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 60rpx;
				position: relative;
	
				.bottomBox {
					width: 43rpx;
					height: 7rpx;
					position: absolute;
					bottom: 0;
					left: calc(50% - 21rpx);
					background: linear-gradient(270deg, #02478D 0%, #003E81 100%);
				}
			}
	
		}
	
		.tabRight {
			float: right;
			display: flex;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			background: url('@/static/waybIll/screen.png') no-repeat;
			padding-right: 20px;
			background-position: right;
			font-weight: 600;
			color: #333333;
			line-height: 80rpx;
			.icon {
				margin-left: 13rpx
			}
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: #fafafa;

		.scroll-box {
			position: relative;
			height: 100%;
			background: #fafafa;
			padding: 0 24rpx;
			box-sizing: border-box;
			.tip {
				margin-top: 32rpx;
				padding-bottom: 24rpx;
			}
		}

		.top-tips-box {
			position: absolute;
			left: 0;
			right: 0;
			// transform: translateY(-100%);
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			text-align: center;
			opacity: 0;
			overflow: hidden;
			font-size: 28rpx;
			// z-index: -1;
			color: #9e9e9e;

			.loading-box {
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.empty {
			margin-top: 100rpx;
		}
		.stowageBox1{
			height: 100%;
			box-sizing: border-box;
		}
		.stowageBox {
			height: 100%;
			box-sizing: border-box;
			.stowageList {
				width: 100%;
				background: #FFFFFF;
				border-radius: 8rpx;
				overflow: auto;
				margin: 24rpx 0;
				padding-bottom: 24rpx;
				box-sizing: border-box;

				.stowageHead {
					height: 94rpx;
					line-height: 94rpx;
					display: flex;
					padding: 27rpx 0 0 29rpx;
					background: linear-gradient(90deg, #E9EEF6 0%, rgba(255, 255, 255, 0.95) 100%);

					.stowageLeft {
						height: 40rpx;
						background: #586486;
						border-radius: 4rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						padding: 0 4rpx;
					}

					.stowageContent {
						margin: 0 36rpx 0 14rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
					}

					.tag {
						width: 74rpx;
						height: 32rpx;
						background: #E8E8E8;
						border-radius: 4rpx;
						line-height: 32rpx;
						text-align: center;
						color: #888888;
						font-size: 24rpx;
						margin-right: 4rpx;
					}
				}

				.address {
					padding: 18rpx 0 0 0;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					.icon {
						font-size: 20rpx;
						float: left;
						padding: 0 12rpx;
						border-radius: 12rpx;
						margin-right: 12rpx;
						color: #fff;
					
						&.start {
							background: #000;
						}
						&.end {
							background: #8c0a0c;
						}
					}
					.addressStar {
						padding-left: 34rpx;
						margin-bottom: 28rpx;
						height: 40rpx;
					}

					.addressEnd {
						padding-left: 34rpx;
						margin-bottom: 30rpx;
						height: 40rpx;
					}
				}

				.stowageInfo {
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9E9E9E;
					line-height: 33rpx;
					padding-left: 33rpx;

					.company {
						margin-bottom: 26rpx;
						font-size: 24rpx;
					}

					.goods {
						font-size: 26rpx;
						display: flex;

						.goodsName {
							margin-right: 40rpx;
						}

						.goodsName text {
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #00468C;
						}

						// .carNum{
						// 	// width: 132rpx;
						// 	background: #FFFFFF;
						// 	display: flex;
						// 	line-height: 34rpx;
						// 	// border: 2rpx solid #003E81;
						// 	view{
						// 		width: 40rpx;
						// 		height: 38rpx;
						// 		background: #003E81;
						// 		border-radius: 4rpx 0 0 4rpx ;
						// 		text-align: center;
						// 		margin-right: 0;
						// 		color: #FFFFFF;
						// 	}
						// 	text{
						// 		font-size: 20rpx;
						// 		zoom: 0.9;
						// 	}
						// 	.carNumber{
						// 		border: 2rpx solid #003E81;
						// 		padding: 0 18rpx;

						// 	}
						// }
					}

					.phoneInfo {
						font-size: 26rpx;
						display: flex;
						margin-top: 16rpx;

						text {
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.called {
							width: 98rpx;
							text-align: center;
							height: 40rpx;
							background: #F0F7FF;
							border-radius: 4rpx;
							color: #003E81;
							display: inline-block;
							margin-left: 28rpx;

							text {
								zoom: 0.9
							}
						}
					}

					.timeInfo {
						font-size: 26rpx;
						display: flex;
						margin-top: 16rpx;

						.text {
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}

					.name {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9E9E9E;
						margin: 16rpx 0 26rpx 0;
					}

					.goodsInfo {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9E9E9E;
						display: flex;

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #8C0000;
						}

						.goodsName {
							padding-right: 44rpx;

							text {
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #00468C;
							}
						}
					}

					.progress {
						font-size: 22rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						display: flex;
						padding-top: 18rpx;
						line-height: 24rpx;

						.progressBar {
							width: 350rpx;
							height: 28rpx;
							margin-right: 28rpx;
						}
					}
				}
			}
		}
	}

	.u-line-progress__background {
		border: 2rpx solid #00468C;
	}

	.search {
		width: 100%;
		background: #FFFFFF;
		// height: 800rpx;
		margin-top: 150rpx;
		
		padding: 0 28rpx 40rpx 28rpx;
		box-shadow: 20rpx 14rpx 24rpx 24rpx rgba(0, 0, 0, 13%);

		.sel {
			height: 600rpx;
			overflow: hidden;
			overflow-y: auto;
			.searchLi {
				margin-bottom: 44rpx;
			}

			.selTop {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-top: 14rpx;
				margin-bottom: 14rpx;
			}

			.tipsBox {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin: 0 -13px;

				.selTips {
					width: 210rpx;
					height: 84rpx;
					text-align: center;
					line-height: 84rpx;
					background: #FAFAFA;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin: 0 0 28rpx 28rpx;
				}

				.seled {
					background: #F0F7FF;
				}
			}

			.project {
				.selpro {
					width: 692rpx;
					height: 72rpx;
					background: rgba(118, 118, 128, 0.04);
					border-radius: 8rpx;
					line-height: 72rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #A1A1A1;
					padding: 0 8rpx 0 28rpx;

					.icon {
						float: right;
						margin: 20rpx;
					}
				}
			}
		}
		.btnBox {
			width: 100%;
			background: #FFFFFF;
			.btn {
				color: #FFFFFF;
				border-radius: 4px;
				height: 80rpx;
				background: linear-gradient(to right, #4d83b9, #003E81);
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
			}
			.save{
				float: left;
				width: 40%;
				background: #FAFAFA;
				color: #003E81;
			}
			.up{
				float: right;
				width: 50%;
			}
			
		}
	}
	.skeleton{
	//骨架屏
		padding: 40rpx 32rpx;
		.skeleton{
			margin-bottom: 20rpx;
		}
	}
	/deep/.textareaCss{
		font-weight: 200;
		font-size: 28rpx;
		color: #909193;
	}
</style>
